<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>后台首页</title>
    {load href="/static/css/admin.css,/static/js/layer/skin/default/layer.css" /}
    <link rel="stylesheet" type="text/css" href="css/admin.css"/>
    <style>
        body{
            background-color: #F3F3F4;
        }
        #title{
            height: 45px;
            background-color: #515151;
            line-height: 45px;
            color: white;
            padding-left: 15px;
        }
        #flexarea{
            display: flex;
            justify-content:flex-start;
            margin-top: 20px;
            min-height: 272px;
            border:1px solid #C9C9C9;
        }

        .itema,.itemb{
            background-color: white;
        }

        .itema{
            width: 177px;
            border-right: 1px solid #E3E3E3;
            text-align: center;
        }
        .itemb{
            width: calc(100% - 177px);
            font-size: 14px;
            color: #797979;
            padding-top: 20px;
            padding-left: 20px;
        }

        .itema img{
            width:103px;
            height:103px;
        }

        .itemb>div{
            margin-bottom: 17px;
        }

        .de{
            margin-top: 24px;
            margin-bottom: 23px;
        }

        .itemb button{
            margin-top: 5px;
            width:169px;
            height: 35px;
            color: white;
        }

        .btn-blue{
            background-color: #419EFF;
            border: none;
            margin-left: 100px;
            margin-right: 47px;
        }
        .btn-back{
            background-color: #A1A1A1;
            border: none;
        }
        .orange{
            color: #FF5800;
        }
    </style>
</head>
<body>
<div class="head">
    <img src="/static/img/notify.svg"/>
    <span>欢迎使用小天科技商户云平台!</span>
    <span class="right">当前门店:<span class="green">{$Think.session.shopname}</span></span>
</div>

<div id="mycontent">
    <div id="title">全部应用</div>
    <div id="flexarea">
        <div class="itema">
            <div class="de">{$res.appname}</div>
            <img src="http://operate.ctx/uploads/{$res.logourl}">
        </div>
        <div class="itemb">
            <div>应用简介:&nbsp;&nbsp;&nbsp;{$res.des}</div>
            <div>当前状态:&nbsp;&nbsp;&nbsp;<span class="orange">{if condition="empty($useage)"}未购买{else/}{:date("Y-m-d H:i:s",$useage["endtime"])}过期{/if}</span></div>
            <div>购买数量:&nbsp;&nbsp;&nbsp;<input type="number" min="1" max="20" id="year" name="year">&nbsp;&nbsp;年</div>
            <div>应用价格:&nbsp;&nbsp;&nbsp;￥{$res.sprice/100}/年</div>
            <div>订单总价:&nbsp;&nbsp;&nbsp;￥<span id="totalfee">0.00</span></div>
            <div>
                <button class="btn-blue" id="submit">确定</button><button class="btn-back" onclick="window.history.go(-1);">返回</button>
            </div>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
{load href="/static/js/layer/layer.js" /}
<script type="text/javascript">
        var sprice={$res.sprice};
        /**
         * 数量变化
         */
        $("#year").on("input",function () {
            document.getElementById("totalfee").innerText=((this.value*sprice)/100).toFixed(2);
        })

        /**
         * 点击确定
         */
        $("#submit").on("click",function () {
            if(!document.getElementById("year").value){
                document.getElementById("year").focus();
                return false;
            }
            if(isNaN(document.getElementById("year").value)){
                layer.msg("请输入一个数字");
                return false;
            }
            $.post("{:url('Index/appdetail')}",{
                "appid":{$res.id},
                "year":document.getElementById("year").value,
                "price":parseInt(document.getElementById("year").value*sprice)
            },function (dat){
                if(dat.status==1){
                    layer.msg(dat.msg,{shade:0.8});
                    setTimeout(function(){
                        window.location.reload();
                    },2000)
                }else{
                    layer.msg(dat.msg);
                }
            },"json")
        })
</script>
</body>
</html>
